<template>
	<checkbox-group @change="handleChange">
		<checkbox class='round' :class="{'checked':checkbox}" :checked="checkbox?true:false" :value="true">
		</checkbox>
		<slot></slot>
	</checkbox-group>
</template>

<script>
	export default {
		name: "qn-checkbox",
		props: {
			value: {
				type: [Boolean],
				default: false
			}
		},
		data() {
			return {

			};
		},
		mounted() {

		},
		computed: {
			checkbox: {
				get() {
					return this.value
				},
				set() {}
			}
		},
		methods: {
			handleChange(event) {
				if (event.detail.value.length) {
					this.checkbox = true;
					this.$emit("input", true)
				} else {
					this.checkbox = false;
					this.$emit("input", false)
				}
				console.log("detail", event.detail)
			}
		}
	}
</script>

<style>

</style>
